<style>
    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }
    .open-form .layui-form-label {
        width: 110px;
    }
    .open-form .layui-input-block{
        margin-left: 140px;
    }
</style>

<script type="text/html" id="viewAttachmentHtml">
    <div id="example1" style="height: 100%;"></div>
</script>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="productAuditReviewForm" class="layui-form open-form">
    <input name="id" type="hidden"/>
    <div class="open-model">
        <div class="open-auto">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>客户信息产品信息</legend>
            </fieldset>

            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">客户名称：</label>
                    <div class="layui-input-block">
                        <input name="customerName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">客户产品类别：</label>
                    <div class="layui-input-block">
                        <input name="cusProductCategory" disabled type="text" class="layui-input"
                               lay-verify="required"
                               required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">客户SKU料号：</label>
                    <div class="layui-input-block">
                        <input name="cusSkuCode" type="text" disabled class="layui-input"
                               lay-verify="required"
                               required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">客户产品名称：</label>
                    <div class="layui-input-block">
                        <input name="cusProductName" disabled type="text" class="layui-input"
                               lay-verify="required"
                               required autocomplete="off"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">客户规格码：</label>
                    <div class="layui-input-block">
                        <input name="cusProductSpec" disabled type="text" class="layui-input"
                               lay-verify="required"
                               required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">附件信息：</label>
                    <div class="layui-input-block" style="display: flex; align-items: center;">
                        <div id="addHeaderPdf" class="companyFormPhotos"></div>
                        <input name="attachmentPdf" id="attachmentPdf" type="hidden" class="layui-input"
                               lay-verify="attachmentPdf"/>
                        <label id="fileName" style="margin-left: 34px"></label>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">需求数量：</label>
                    <div class="layui-input-block">
                        <input name="cusProductCount" disabled type="text" class="layui-input"
                               lay-verify="required"
                               required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">评审截止时间：</label>
                    <div class="layui-input-block">
                        <input name="reviewEndTime" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label required">计划交货时间：</label>
                    <div class="layui-input-block">
                        <input type="text" id="planGivenTime" disabled name="planGivenTime" class="layui-input"
                               placeholder="请选择计划交货时间">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">包装说明：</label>
                    <div class="layui-input-block">
                        <input name="remark" disabled type="text" class="layui-input"/>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title">
                <legend>关联内部产品信息</legend>
            </fieldset>

            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">产品类别：</label>
                    <div class="layui-input-block">
                        <input name="productTypeName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                        <input id="productTypeId" name="productTypeId" type="hidden" value="' + d.proTypeId + '"
                               lay-verify="required">
                    </div>
                </div>

                <div class="layui-col-md3">
                    <label class="layui-form-label">产品性质：</label>
                    <div class="layui-input-block">
                        <input name="productNatureName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <label class="layui-form-label">是否关联新料号：</label>
                    <div class="layui-input-block">
                        <input name="isUseOrAdd" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>

                <div class="layui-col-md3">
                    <label class="layui-form-label">内部SKU号：</label>
                    <div class="layui-input-block" id="SkuInfo">
                        <input name="inSkuCode" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">内部SKU名称：</label>
                    <div class="layui-input-block">
                        <input type="text" id="inSkuName" disabled name="inSkuName" class="layui-input"
                               placeholder="请输入名称">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">内部规格码：</label>
                    <div class="layui-input-block">
                        <input type="text" id="inSkuSpec" disabled name="inSkuSpec" class="layui-input"
                               placeholder="请输入名称">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">基础单位：</label>
                    <div class="layui-input-block">
                        <input name="inUnitName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">计量方式(主)：</label>
                    <div class="layui-input-block">
                        <input name="mainCalWayName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>

            </div>
            <div class="layui-form-item layui-row">
                <!--        <div class="layui-col-md3">-->
                <!--            <label class="layui-form-label">基础单位数量：</label>-->
                <!--            <div class="layui-input-block">-->
                <!--                <input type="text" disabled id="inUnitCount" name="inUnitCount" class="layui-input"-->
                <!--                       placeholder="数量">-->
                <!--            </div>-->
                <!--        </div>-->
                <div class="layui-col-md3">
                    <label class="layui-form-label required">包装单位(主)：</label>
                    <div class="layui-input-block">
                        <input name="mainUnitName" disabled type="text" class="layui-input"
                               lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">换算率(主)：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled  name="mainUnitRate" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">计量方式(辅)：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled name="subCalWayName" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">计量单位(辅)：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled name="subUnitName" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">换算率(辅)：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled name="subUnitRate" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">成本核算类型：</label>
                    <div class="layui-input-block">
                        <select id="costCheckType" disabled name="costCheckType" lay-filter="costCheckType"
                                class="layui-input borderNone"></select>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">是否质检：</label>
                    <div class="layui-input-block">
                        <select id="checkStatus" disabled name="checkStatus" lay-filter="checkStatus"
                                class="layui-input borderNone"></select>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">是否料箱管理：</label>
                    <div class="layui-input-block">
                        <select id="boxStatus" disabled name="boxStatus" lay-filter="boxStatus"
                                class="layui-input borderNone"></select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">建议最低价：</label>
                    <div class="layui-input-block">
                        <input name="suggestionMinPrice" id="suggestionMinPrice" type="text" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">最低价：</label>
                    <div class="layui-input-block">
                        <input name="minPrice" id="minPrice" type="text" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">说明：</label>
                    <div class="layui-input-block">
                        <input name="inRemark" disabled type="text" class="layui-input"/>
                    </div>
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>审核信息</legend>
            </fieldset>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">评估结果：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled name="result" class="layui-input"
                               placeholder="评估结果">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">评估备注：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled name="reviewDesc" class="layui-input"
                               placeholder="评估备注">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">评审人：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled name="reviewerName" class="layui-input"
                               placeholder="评审人">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">评审时间：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled name="reviewOkTime" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">评审用时(小时)：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled name="reviewTime" class="layui-input"
                               placeholder="评审用时">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
        </div>
    </div>
</form>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'upload', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;
        var table = layui.table;
        var form = layui.form;

        let data = admin.getTempData('reviewData');

        //重新渲染基础单位
        admin.reqSync('enterprise/product/admin/productUnit/getIsBaseUnitProductUnitByType', {
            type: 0,
            productTypeId: data.productTypeId
        }, res => {
            if (res.code === 200) {
                if (res.data != null) {
                    let infoName = res.data.name || '';
                    $('#inUnitName').val(infoName);
                } else {
                    $('#inUnitName').val("");
                }
            }
        }, 'get');

        let imagUrl = "";
        //页面加载时 拿到id

        let params = {};
        params.id = data.id;

        /**
         * 初始化评审详情
         */
        admin.req('enterprise/product/admin/productReview/detail/' + data.id, {}, function (res) {
            if (res.code == 200) {
                form.val('productAuditReviewForm', res.data === undefined ? null : res.data);
                //初始化文件
                $('#addHeaderPdf').html('<div class="attachments">' +
                    '<div><img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + name + '</span></div></div>');
                $('#attachmentPdf').val(res.data.attachmentPdfUrl);
                imagUrl = res.data.attachmentPdfUrl;
                $('#fileName').text(res.data.fileName);
                $(".attachments").click(function () {
                    let json = {};
                    json.attachment = imagUrl;
                    showViewAttachmentModel(json);
                })

                admin.getDictList("costCheckType", "product_detail_cost_check_type", res.data.costCheckType, "成本核算");
                admin.getDictList("checkStatus", "sys_yes_no", res.data.checkStatus, "是否质检");
                admin.getDictList("boxStatus", "sys_yes_no",res.data.boxStatus, "是否料箱管理");
                form.render(); //菜单渲染 把内容加载进去
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        });

        $(".attachments").click(function () {
            let json = {};
            json.attachment = imagUrl;
            showViewAttachmentModel(json);
        })
        form.on('submit(productAuditReviewForm)', function (d) {
            layer.load(2);
            let params = {};
            params.result = $("#result-sh").val();
            params.reviewDesc = $("#reviewDesc-sh").val();
            admin.req('enterprise/product/admin/productReview/audit/' + data.id, params, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('reviewTableInfo');
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'GET');
            return false;
        });

        // 查看附件
        function showViewAttachmentModel(data) {
            admin.open({
                type: 1,
                area: ['60%', '80%'],
                offset: '65px',
                title: '查看附件',
                content: $('#viewAttachmentHtml').html(),
                success: function () {
                    if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
                        PDFObject.embed(data.attachment, "#example1");
                    } else {
                        var attachmentHtml = "";
                        data.attachment.split(",").forEach((attachmentUrl, index) => {
                            attachmentHtml += '<div><div><img src="' + attachmentUrl + '"></div></div>';
                        });
                        $('#example1').html(attachmentHtml);
                    }
                }
            })
        }

    });
</script>